---
layout: default
---

<!-- Instead of "page.name", we now use "page.series" for the display title. -->
<title id="dynamic-title">{{ page.series }} - Recurring School Details</title>

<div class="page-header" id="conf-title">
  <div class="row">
    <div class="col-sm-12">
      <h1>
        <span id="conf-title-href">{{ page.series }} - Recurring</span>
        <span id="twitter-box"></span>
      </h1>
    </div>
  </div>
</div>

<div id="page-content">
  {% comment %}
    page.items is the array of all occurrences of this recurring school,
    already sorted newest-first by your plugin (if you chose to).
  {% endcomment %}

  {% if page.items and page.items.size > 0 %}

    <!-- Find the first future event (if any) by deadline date -->
    {% assign now_ts = "now" | date: "%s" %}
    {% assign upcoming_event = "" %}
    {% assign upcoming_found = false %}

    {% for event in page.items %}
      {% assign event_ts = event.deadline | date: "%s" %}
      {% if event.deadline != "TBA" and event_ts > now_ts and upcoming_found == false %}
        {% assign upcoming_event = event %}
        {% assign upcoming_found = true %}
      {% endif %}
    {% endfor %}

    {% if upcoming_found %}
      <h2>Next Upcoming Version: {{ upcoming_event.name }} {{ upcoming_event.year }}</h2>
      <div id="conf-key-facts" class="row">
        <div class="col-12">
          <img src="{{ site.baseurl }}/static/img/084-calendar.svg" class="badge-link" />
          <span id="conf-date">{{ upcoming_event.date }}</span>
        </div>
        <div class="col-12">
          <img src="{{ site.baseurl }}/static/img/072-location.svg" class="badge-link" />
          <a id="conf-place" target="_blank" href="https://maps.google.com/?q={{ upcoming_event.place }}">
            {{ upcoming_event.place }}
          </a>
        </div>
        <div class="col-12">
          <img src="{{ site.baseurl }}/static/img/203-earth.svg" class="badge-link" />
          <a id="conf-website" target="_blank" href="{{ upcoming_event.link }}">{{ upcoming_event.link }}</a>
        </div>

        {% if upcoming_event.email %}
        <div class="col-12" id="conf-email-div">
          <img src="{{ site.baseurl }}/static/img/empty-email-svgrepo-com.svg" class="badge-link" />
          <a id="conf-email" target="_blank" href="mailto:{{ upcoming_event.email }}">{{ upcoming_event.email }}</a>
        </div>
        {% endif %}

        {% if upcoming_event.twitter %}
        <div class="col-12" id="conf-twitter-div">
          <img src="{{ site.baseurl }}/static/img/x-2.svg" class="badge-link" />
          <a id="conf-twitter" target="_blank" href="https://twitter.com/{{ upcoming_event.twitter }}">
            @{{ upcoming_event.twitter }}
          </a>
        </div>
        {% endif %}
      </div>

      <!-- Deadline & timer row -->
      <div id="conf-deadline-info" class="row mt-4">
        <div class="col-12 col-md-6 meta deadline">
          Download Conference deadline:
        </div>
        <div id="conference-deadline" class="col-sm-12 col-md-6 calendar meta"></div>

        <div class="col-12 col-md-6 meta deadline">
          Deadline (conference timezone):
        </div>
        <div class="col-sm-12 col-md-6 meta">
          <span class="deadline-time"></span>
        </div>

        <div class="col-sm-12 col-md-6 meta">
          Deadline (your local <span class="local-timezone">America/New_York</span>):
        </div>
        <div class="col-sm-12 col-md-6 meta local-timezone-hide">
          <span class="deadline-local-time"></span>
        </div>
      </div>

      <div id="conf-deadline-timer" class="row">
        <div id="conf-timer" class="col-12"></div>
      </div>
      <hr>
    {% else %}
      <h2>No Upcoming Versions</h2>
    {% endif %}

    <h2>Past Versions</h2>
    {% for event in page.items %}
      {% assign event_ts = event.deadline | date: "%s" %}
      {% if upcoming_found %}
        {% if event_ts < now_ts or event.deadline == "TBA" %}
          <div class="past-version row mb-3">
            <div class="col-12">
              <h3>{{ event.name }} {{ event.year }}</h3>
              <p>
                <strong>Date:</strong> {{ event.date }}<br>
                <strong>Location:</strong> {{ event.place }}<br>
                <strong>Website:</strong> <a href="{{ event.link }}" target="_blank">{{ event.link }}</a>
              </p>
            </div>
          </div>
        {% endif %}
      {% else %}
        <!-- If no upcoming event is found, treat them all as past -->
        <div class="past-version row mb-3">
          <div class="col-12">
            <h3>{{ event.name }} {{ event.year }}</h3>
            <p>
              <strong>Date:</strong> {{ event.date }}<br>
              <strong>Location:</strong> {{ event.place }}<br>
              <strong>Website:</strong> <a href="{{ event.link }}" target="_blank">{{ event.link }}</a>
            </p>
          </div>
        </div>
      {% endif %}
    {% endfor %}

  {% else %}
    <h2>No data found for {{ page.series }}</h2>
  {% endif %}
</div>

<script type="text/javascript">
$(function() {
    // Load your data & utility scripts
    {% include load_data.js %}
    {% include utils.js %}

    // Enable extra UTC offsets for easier fallback
    addUtcTimeZones();

    // Attempt to detect local timezone
    try {
      var local_timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
      $('.local-timezone').text(local_timezone.toString());
    } catch(err) {
      // Hide local-timezone sections if not supported
      $('.local-timezone-hide').hide();
    }

    // If we found an upcoming_event in Liquid, let's handle the countdown & ICS calendar
    {% if upcoming_found %}
      // Insert a Tweet button for the upcoming event
      var tweetHTML = '<a href="https://twitter.com/share" class="twitter-share-button" ' +
                      'data-text="Countdown to {{ upcoming_event.name }} {{ upcoming_event.year }}!" ' +
                      'data-show-count="false" style="font-size:13px;">Tweet</a>' +
                      '<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></' + 'script>';
      $('#twitter-box').html(tweetHTML);

      {% if upcoming_event.deadline == "TBA" %}
        $('#conf-timer').html("TBA");
        $('.deadline-time').html("TBA");
        $('.deadline-local-time').html("TBA");
      {% else %}
        var timezone = "{{ upcoming_event.timezone | default: 'America/New_York' }}";
        var confDeadline = moment.tz("{{ upcoming_event.deadline }}", timezone);

        // Insert ICS calendar link
        var conferenceDeadlineCalendar = createCalendarFromObject({
          id: '{{ upcoming_event.id }}',
          title: '{{ upcoming_event.name }} {{ upcoming_event.year }} deadline',
          date: confDeadline.toDate(),
          duration: 60
        });
        document.querySelector('#conference-deadline').appendChild(conferenceDeadlineCalendar);

        // Render countdown timer
        $('#conf-timer').countdown(confDeadline.toDate(), function(event) {
          $(this).html(event.strftime('%D days %Hh %Mm %Ss'));
        });
        $('.deadline-time').html(confDeadline.toString());

        // Convert deadline to local timezone
        try {
          var localConfDeadline = moment.tz(confDeadline, local_timezone);
          $('.deadline-local-time').html(localConfDeadline.toString());
        } catch(err) {
          console.log("Error converting to local timezone:", err);
        }
      {% endif %}
    {% endif %}

    // Example: convert subject abbreviations to full names using sub2name
    $('#conf-subs .conf-sub').each(function() {
      var abbreviated = $(this).text().trim().replace(" ", "");
      if (sub2name[abbreviated]) {
        $(this).text(sub2name[abbreviated]);
      }
    });
});
</script>
